<!-- src/views/LogSearch.vue -->
<template>
  <Section padding="0 2rem 0 0rem">
    <GapedColumn gap="middle">
      <!-- Page Header -->
      <page-header title="日志检索" icon="search">
        <template #extra>
          <!-- Additional header content if needed -->
        </template>
      </page-header>

      <!-- Search Form -->
      <log-search-form @search="handleSearch" @reset="handleReset" />

      <!-- Results Table -->
      <GapedColumn>
        <el-button style="width: 200px" @click="handleNodesInit">
          <el-icon><Coin /></el-icon>
          使用当前ip初始化节点
        </el-button>

        <log-search-results
          :data="logData"
          :loading="apiStore.apiStates.searchLogs.loading"
          :total="total"
          @view-details="showDetail"
          @page-change="handleChange"
        />
      </GapedColumn>
    </GapedColumn>

    <!-- Detail Dialog -->
    <LogDetailDialog ref="logDetailDialog" />
  </Section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageHeader from '@/components/layout/PageHeader.vue'
import LogSearchForm from '@/components/logSearch/LogSearchForm.vue'
import LogSearchResults from '@/components/logSearch/LogSearchResults.vue'
import LogDetailDialog from '@/components/logSearch/LogDetailDialog.vue'
import useApi from '@/core/apiStore'
import { Section, GapedColumn } from '@/core/components'
import type { LogEntry } from '@/components/types'
import { chain, map, difference } from 'lodash'
import { transformLogData } from '@/utils'

const apiStore = useApi()

const logData = ref<LogEntry[]>([])
const logDetailDialog = ref(null)
const total = ref(0)

interface SearchParams {
  keyword?: string
  sourceIp?: string
  targetIp?: string
  level?: string
  type?: string
  date?: string
  page?: number
}

const handleChange = async pageNum => {
  const result = await apiStore.searchLogs({
    ...searchParamRef.value,
    page: pageNum,
  })
  const { logs, total_count = 0 } = result
  total.value = total_count

  // 使用重构后的函数赋值给logData
  logData.value = transformLogData(logs)
}

const searchParamRef = ref({})

const handleSearch = async (params: SearchParams) => {
  searchParamRef.value = params
  const result = await apiStore.searchLogs(params)
  const { logs, total_count = 0 } = result
  total.value = total_count

  // 使用重构后的函数赋值给logData
  logData.value = transformLogData(logs)
}

const handleReset = () => {
  console.log('Reset search form')
}

const showDetail = (log: LogEntry) => {
  console.log('show-log', log)
  logDetailDialog.value.show(log)
}

const handleNodesInit = async () => {
  // 获取当前的所有nodes
  const nodes = await apiStore.getNodes()

  const ips = chain(logData.value)
    .map(item => item.agentIp)
    .uniq()
    .compact()
    .value()

  const existingIps = map(nodes, 'ip')

  // 使用lodash的difference函数找出差集
  const newIps = difference(ips, existingIps)

  await apiStore.setNodes({ items: [...nodes, ...map(newIps, ip => ({ ip }))] })
  console.log('New IPs to add:', newIps)
}
</script>
